/* 全局主题CSS变量 */
:root {
    /* 默认主题色 */
    --demo-bg-color: #ffffff;
    --demo-bg-color-rgb: 255, 255, 255;
    --demo-text-color: #000000;
    
    /* 应用背景色 */
    --app-bg-color: #ffffff;
    --app-bg-color-rgb: 255, 255, 255;
    --app-text-color: #000000;
}

/* 应用主题色到页面背景 */
html, body {
    background-color: var(--app-bg-color) !important;
    color: var(--app-text-color) !important;
    transition: background-color 0.3s ease, color 0.3s ease;
}

#app {
    background-color: var(--app-bg-color) !important;
    transition: background-color 0.3s ease;
}

/* 主题色应用到主要容器 */
.hooks-demo,
.home,
.about,
.canves,
.element-css,
.home-page,
.system-page {
    background-color: var(--demo-bg-color) !important;
    transition: background-color 0.3s ease;
}

/* 卡片组件主题适配 */
.el-card,
.my-el-card {
    background-color: var(--demo-bg-color) !important;
    border-color: rgba(var(--demo-bg-color-rgb), 0.1) !important;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

/* 按钮组件主题适配 */
.el-button,
.my-el-button {
    transition: all 0.3s ease;
}

/* 输入框组件主题适配 */
.el-input__inner,
input[type="text"],
input[type="color"] {
    background-color: rgba(var(--demo-bg-color-rgb), 0.05) !important;
    border-color: rgba(var(--demo-bg-color-rgb), 0.2) !important;
    transition: all 0.3s ease;
}

/* 表格组件主题适配 */
.el-table {
    background-color: var(--demo-bg-color) !important;
    transition: background-color 0.3s ease;
}

.el-table th,
.el-table td {
    background-color: var(--demo-bg-color) !important;
    transition: background-color 0.3s ease;
}

/* 对话框组件主题适配 */
.el-dialog {
    background-color: var(--demo-bg-color) !important;
    transition: background-color 0.3s ease;
}

/* 下拉菜单组件主题适配 */
.el-dropdown-menu {
    background-color: var(--demo-bg-color) !important;
    transition: background-color 0.3s ease;
}

/* 工具提示组件主题适配 */
.el-tooltip__popper {
    background-color: var(--demo-bg-color) !important;
    color: var(--demo-text-color) !important;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* 导航栏主题适配 */
nav {
    background-color: rgba(var(--demo-bg-color-rgb), 0.9) !important;
    transition: background-color 0.3s ease;
}

/* 页面内容区域主题适配 */
.page-content,
.content-area,
.main-content {
    background-color: var(--demo-bg-color) !important;
    transition: background-color 0.3s ease;
}

/* 表单组件主题适配 */
.el-form,
.el-form-item {
    background-color: transparent !important;
}

/* 标签页组件主题适配 */
.el-tabs__content {
    background-color: var(--demo-bg-color) !important;
    transition: background-color 0.3s ease;
}

/* 分页组件主题适配 */
.el-pagination {
    background-color: transparent !important;
}

/* 消息提示组件主题适配 */
.el-message {
    background-color: var(--demo-bg-color) !important;
    border-color: rgba(var(--demo-bg-color-rgb), 0.2) !important;
    transition: background-color 0.3s ease;
}

/* 通知组件主题适配 */
.el-notification {
    background-color: var(--demo-bg-color) !important;
    border-color: rgba(var(--demo-bg-color-rgb), 0.2) !important;
    transition: background-color 0.3s ease;
}

/* 加载组件主题适配 */
.el-loading-mask {
    background-color: rgba(var(--demo-bg-color-rgb), 0.8) !important;
    transition: background-color 0.3s ease;
}

/* 选择器组件主题适配 */
.el-select-dropdown {
    background-color: var(--demo-bg-color) !important;
    transition: background-color 0.3s ease;
}

/* 日期选择器主题适配 */
.el-date-picker {
    background-color: var(--demo-bg-color) !important;
    transition: background-color 0.3s ease;
}

/* 时间选择器主题适配 */
.el-time-picker {
    background-color: var(--demo-bg-color) !important;
    transition: background-color 0.3s ease;
}

/* 级联选择器主题适配 */
.el-cascader__dropdown {
    background-color: var(--demo-bg-color) !important;
    transition: background-color 0.3s ease;
}

/* 树形组件主题适配 */
.el-tree {
    background-color: transparent !important;
}

/* 上传组件主题适配 */
.el-upload {
    background-color: transparent !important;
}

/* 进度条组件主题适配 */
.el-progress {
    background-color: transparent !important;
}

/* 滑块组件主题适配 */
.el-slider {
    background-color: transparent !important;
}

/* 开关组件主题适配 */
.el-switch {
    background-color: transparent !important;
}

/* 单选框组件主题适配 */
.el-radio {
    background-color: transparent !important;
}

/* 复选框组件主题适配 */
.el-checkbox {
    background-color: transparent !important;
}

/* 评分组件主题适配 */
.el-rate {
    background-color: transparent !important;
}

/* 标签组件主题适配 */
.el-tag {
    background-color: rgba(var(--demo-bg-color-rgb), 0.1) !important;
    border-color: rgba(var(--demo-bg-color-rgb), 0.2) !important;
    transition: all 0.3s ease;
}

/* 徽章组件主题适配 */
.el-badge {
    background-color: transparent !important;
}

/* 面包屑组件主题适配 */
.el-breadcrumb {
    background-color: transparent !important;
}

/* 步骤条组件主题适配 */
.el-steps {
    background-color: transparent !important;
}

/* 时间线组件主题适配 */
.el-timeline {
    background-color: transparent !important;
}

/* 轮播图组件主题适配 */
.el-carousel {
    background-color: transparent !important;
}

/* 折叠面板组件主题适配 */
.el-collapse {
    background-color: transparent !important;
}

.el-collapse-item__header {
    background-color: rgba(var(--demo-bg-color-rgb), 0.05) !important;
    transition: background-color 0.3s ease;
}

.el-collapse-item__content {
    background-color: var(--demo-bg-color) !important;
    transition: background-color 0.3s ease;
}

/* 手风琴组件主题适配 */
.el-collapse-item__wrap {
    background-color: var(--demo-bg-color) !important;
    transition: background-color 0.3s ease;
}

/* 抽屉组件主题适配 */
.el-drawer {
    background-color: var(--demo-bg-color) !important;
    transition: background-color 0.3s ease;
}

/* 弹出框组件主题适配 */
.el-popover {
    background-color: var(--demo-bg-color) !important;
    transition: background-color 0.3s ease;
}

/* 气泡确认框组件主题适配 */
.el-popconfirm {
    background-color: var(--demo-bg-color) !important;
    transition: background-color 0.3s ease;
}

/* 空状态组件主题适配 */
.el-empty {
    background-color: transparent !important;
}

/* 骨架屏组件主题适配 */
.el-skeleton {
    background-color: transparent !important;
}

/* 结果组件主题适配 */
.el-result {
    background-color: transparent !important;
}

/* 描述列表组件主题适配 */
.el-descriptions {
    background-color: transparent !important;
}

.el-descriptions__body {
    background-color: var(--demo-bg-color) !important;
    transition: background-color 0.3s ease;
}

/* 统计数值组件主题适配 */
.el-statistic {
    background-color: transparent !important;
}

/* 头像组件主题适配 */
.el-avatar {
    background-color: transparent !important;
}

/* 图片组件主题适配 */
.el-image {
    background-color: transparent !important;
}

/* 链接组件主题适配 */
.el-link {
    background-color: transparent !important;
}

/* 分割线组件主题适配 */
.el-divider {
    background-color: rgba(var(--demo-bg-color-rgb), 0.2) !important;
    transition: background-color 0.3s ease;
}

/* 回到顶部组件主题适配 */
.el-backtop {
    background-color: rgba(var(--demo-bg-color-rgb), 0.8) !important;
    transition: background-color 0.3s ease;
}

/* 无限滚动组件主题适配 */
.el-infinite-scroll {
    background-color: transparent !important;
}

/* 虚拟滚动组件主题适配 */
.el-virtual-scrollbar {
    background-color: rgba(var(--demo-bg-color-rgb), 0.1) !important;
    transition: background-color 0.3s ease;
}

/* 响应式断点主题适配 */
@media (max-width: 768px) {
    .theme-manager {
        top: 10px;
        right: 10px;
    }
    
    .theme-panel {
        width: 280px;
        right: -10px;
    }
} 